<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <a-drawer
    :title="!dataForm.id ? '添加' : '修改'"
    :visible="visible"
    @close="cancel"
    :body-style="{ paddingBottom: '80px' }"
    :width="750"
  >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule" v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()"
             label-width="80px" style="padding: 0px 10px;margin: 0px 10px"
    >
      <el-form-item label="用户名">
        <el-input v-model="dataForm.username" placeholder="请输入用户名" size="small"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="dataForm.phone" placeholder="请输入手机号" size="small"></el-input>
      </el-form-item>
      <!--      <el-form-item label="省">-->
      <!--        <el-input v-model="dataForm.province" placeholder="请输入省" size="small"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="市">-->
      <!--        <el-input v-model="dataForm.city" placeholder="请输入市" size="small"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="区">-->
      <!--        <el-input v-model="dataForm.region" placeholder="请输入区" size="small"></el-input>-->
      <!--      </el-form-item>-->

      <!--      <el-form-item label="邀请码" >-->
      <!--        <el-input v-model="dataForm.invitecode" placeholder="请输入邀请码" size="small" disabled></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="上级邀请码">-->
      <!--        <el-input v-model="dataForm.invitecode" placeholder="请输入上级邀请码" size="small"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="VIP等级" v-if="this.selOptions.JavaInfo.level===0" prop="vipstatus">
        <el-select v-model="dataForm.vipstatus" placeholder="请选择VIP等级" class="width100" clearable filterable>
          <el-option
            v-for="item in selOptions.vipType"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作伙伴" v-if="this.selOptions.JavaInfo.level===0" prop="partnerstatus">
        <el-select v-model="dataForm.partnerstatus" placeholder="请选择身份" class="width100" clearable filterable>
          <el-option
            v-for="item in selOptions.partnerstatus"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构" v-if="this.selOptions.JavaInfo.level===0" prop="orgid">
        <el-select v-model="dataForm.orgid" placeholder="请选择机构" class="width100" filterable clearable
                   v-if="this.selOptions.JavaInfo.level===0"
        >
          <el-option
            v-for="item in orglist"
            :key="item.id"
            :value="item.id"
            :label="item.orgname"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级代理" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="number" v-model="dataForm.ruserid" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="CDK数量" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="number" v-model="dataForm.cdkcount" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="累计金币" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="coin" v-model="dataForm.totalcoin" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="当前金币" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="coin" v-model="dataForm.coin" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="钱包" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="number" v-model="dataForm.amount" placeholder="请输入钱包" size="small" style="width: 200px">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="系统抽成" prop="sysextractionrate" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="number" :min="100" v-model="dataForm.sysextractionrate" placeholder="系统抽成" size="small"
                  style="width: 200px"
        >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="上级抽成">
        <el-input type="number" v-model="dataForm.extractionrate" placeholder="请输入下级抽成" size="small"
                  style="width: 200px"
        >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="兑换比例" prop="conversionrate" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="number" :min="100" v-model="dataForm.conversionrate" placeholder="兑换比例" size="small"
                  style="width: 200px"
        >
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="参数设置" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="usufruct" v-model="dataForm.usufruct" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="coin" v-model="dataForm.note" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" v-if="this.selOptions.JavaInfo.level===0">
        <el-input type="coin" v-model="dataForm.tag" placeholder="请输入" size="small"></el-input>
      </el-form-item>
    </el-form>
    <div
      :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}"
    >
      <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </div>
  </a-drawer>
</template>

<script>
import api from '@/api/api'
import utils from '@/api/utils'

export default {
  components: {},
  data() {
    return {
      visible: false,
      selOptions: {},
      loading: false,
      orglist: [],
      dataForm: {
        id: 0,
        username: '',
        cdkcount: '',
        orgid: '',
        usufruct: '',
        ruserid: '',
        partnerstatus: 0,
        password: '',
        avatar: '',
        bgimg: '',
        sex: '',
        birthday: '',
        phone: '',
        email: '',
        province: '',
        city: '',
        region: '',
        level: '',
        note: '',
        tag: '',
        lockstatus: '',
        sysextractionrate: '',
        extractionrate: '',
        conversionrate: '',
        type: '',
        status: '',
        authstatus: '',
        adminid: '',
        owenerinvitecode: '',
        invitecode: '',
        totalcoin: '',
        coin: '',
        amount: '',
        point: '',
        openid: '',
        wxappid: '',
        vipstatus: '',
        vipendtime: '',
        onlinestatus: ''
      },
      dataRule: {
        orgid: [
          { required: true, message: '机构  为必填项', trigger: 'blur' }
        ],
        sysextractionrate: [
          { required: true, message: '系统抽成  为必填项', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '用户名  为必填项', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码  为必填项', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '用户头像  为必填项', trigger: 'blur' }
        ],
        bgimg: [
          { required: true, message: '背景图片  为必填项', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别  为必填项', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '生日  为必填项', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号  为必填项', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱  为必填项', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '省  为必填项', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '市  为必填项', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '区  为必填项', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '等级  为必填项', trigger: 'blur' }
        ],
        note: [
          { required: true, message: '签名  为必填项', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '标签  为必填项', trigger: 'blur' }
        ],
        lockstatus: [
          { required: true, message: '锁定状态  为必填项', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '类型  为必填项', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态  为必填项', trigger: 'blur' }
        ],
        authstatus: [
          { required: true, message: '认证状态  为必填项', trigger: 'blur' }
        ],
        adminid: [
          { required: true, message: '管理员ID  为必填项', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '创建时间  为必填项', trigger: 'blur' }
        ],
        updatetime: [
          { required: true, message: '更新时间  为必填项', trigger: 'blur' }
        ],
        owenerinvitecode: [
          { required: true, message: '邀请码  为必填项', trigger: 'blur' }
        ],
        invitecode: [
          { required: true, message: '上级邀请码  为必填项', trigger: 'blur' }
        ],
        coin: [
          { required: true, message: '金币  为必填项', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '钱包  为必填项', trigger: 'blur' }
        ],
        conversionrate: [
          { required: true, message: '兑换比例  为必填项', trigger: 'blur' },
          { validator: this.validateCom, trigger: 'blur' }
        ],
        point: [
          { required: true, message: '积分  为必填项', trigger: 'blur' }
        ],
        openid: [
          { required: true, message: '微信openid  为必填项', trigger: 'blur' }
        ],
        wxappid: [
          { required: true, message: '微信小程序ID  为必填项', trigger: 'blur' }
        ],
        vipstatus: [
          { required: true, message: 'vip状态  为必填项', trigger: 'blur' }
        ],
        vipendtime: [
          { required: true, message: 'Vip结束时间  为必填项', trigger: 'blur' }
        ],
        onlinestatus: [
          { required: true, message: '在线状态  为必填项', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) { // 初始化表单验证规则
      this.dataForm.id = id || undefined
      this.visible = true
      this.selOptions = this.$constants.selOptions
      utils.getOrgList().then(res => {
        this.orglist = res.datalist
      })
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.loading = true
          api.post('rest/vabc/loginuser/info', { id: this.dataForm.id }).then(res => {
            this.dataForm = res
            this.dataForm.amount = this.dataForm.amount / 100.0
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    // 表单数据提交
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let postData = Object.assign({}, this.dataForm)
          if (!this.dataForm.id) {
            postData.id == undefined
            api.post('rest/vabc/loginuser/save', postData).then(res => {
              this.$message.success('创建成功')
              this.reset()
              this.visible = false
              this.$parent.getDataList()
            }).finally(() => {
              this.loading = false
            })
          } else {
            postData.amount = postData.amount * 100
            if (postData.conversionrate > 100) {
              this.$message.error('兑换比例不得大于100%')
              this.loading = false
              return
            }
            api.post('rest/vabc/loginuser/updateByID', postData).then(res => {
              this.$message.success('保存成功')
              this.reset()
              this.visible = false
              this.$parent.getDataList()
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    },
    cancel() {
      this.visible = false
      this.reset()
    },
    validateCom(rule, value, callback) {
      const num = Number(value)
      if (Number.isInteger(num)) {
        if (num < this.minNum) {
          return callback(new Error('输入值必须大于100'))
        }
        // else if (num > this.maxNum) {
        //   return callback(new Error("输入值必须小于1000000"));
        // }
        return callback()
      }
      return callback(new Error('输入值必须为正整数'))
    },
    reset() {
      this.$refs.dataForm.resetFields()
      this.$data.dataForm = JSON.parse(JSON.stringify(this.$options.data().dataForm))
      //图片回写
      //this.$refs["childData"].fileList=[]
    }
  }
}
</script>
